<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>诗词大王首页</title>
    <link rel="stylesheet" href="bootstrap-4.6.1-dist/css/bootstrap.min.css">
</head>
<style>
    body{
        background-image: url("image/background_img.jpg");
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-size: cover;
    }
    .shiji-item{
        margin-bottom: 30px;
    }
</style>
<body>
<header id="header"></header>

<section>
    <div class="container">
        <div class="row mt-md-3">
            <div class="col col-sm-12 col-md-12">
                <div class="row" id="poemType">
                    <!-- 轮播图 -->
                    <div class="col col-sm-12 col-md-12 col-lg-9">
                        <div id="carouselIndicators" class="carousel slide card" data-ride="carousel">
                            <ol class="carousel-indicators">
                                <li data-target="#carouselIndicators" data-slide-to="1" class="active"></li>
                                <li data-target="#carouselIndicators" data-slide-to="2" class=""></li>
                                <li data-target="#carouselIndicators" data-slide-to="3" class=""></li>
                            </ol>
                            <div class="carousel-inner">
                                <div class="carousel-item active">
                                    <a :href="'poemsToType.html?古诗三百首'">
                                        <img class="d-block w-100 img-fluid" loading="lazy" src="https://image.xungushici.com/post/14601.jpg" alt="30句堪称人间绝句的诗句">
                                    </a>
                                    <div class="carousel-caption">
                                        <h5>古诗300首</h5>
                                    </div>
                                </div>
                                <div class="carousel-item ">
                                    <a :href="'poemsToType.html?宋词三百首'">
                                        <img class="d-block w-100 img-fluid" loading="lazy" src="https://image.xungushici.com/post/12601.jpg" alt="20句最美古诗词">
                                    </a>
                                    <div class="carousel-caption">
                                        <h5>宋词300首</h5>
                                    </div>
                                </div>
                                <div class="carousel-item ">
                                    <a :href="'poemsToType.html?唐诗三百首'">
                                        <img class="d-block w-100 img-fluid" loading="lazy" src="https://image.xungushici.com/post/8602.jpg" alt="10首描写心里憋屈难受发愁的古诗词句">
                                    </a>
                                    <div class="carousel-caption">
                                        <h5>唐诗300首</h5>
                                    </div>
                                </div>
                            </div>
                            <a class="carousel-control-prev" href="#carouselIndicators" role="button" data-slide="prev">
                                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                                <span class="sr-only">Previous</span>
                            </a>
                            <a class="carousel-control-next" href="#carouselIndicators" role="button" data-slide="next">
                                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                <span class="sr-only">Next</span>
                            </a>
                        </div>
                    </div>
                    <!-- 轮播图边上的图片链接 -->
                    <div class="col col-lg-3 d-none d-lg-block shiji-container">
                        <div class="card shiji-item mt-0">
                            <a :href="'poemsToType.html?宋词精选'"><img class="img-fluid" loading="lazy" src="image/songcijinxuan.gif" width="300px" /></a>
                        </div>
                        <div class="card shiji-item ">
                            <a :href="'poemsToType.html?古诗十九首'"><img class="img-fluid" loading="lazy" src="image/songci19shou.gif" width="300px" /></a>
                        </div>
                        <div class="card shiji-item ">
                            <a :href="'poemsToType.html?小学古诗'"><img class="img-fluid" loading="lazy" src="image/kebenlidegushici.jpg" width="300px" /></a>
                        </div>
                    </div>
                </div>
                <!-- 推荐诗词 -->
                <div class="card mt-3  mb-3" id="poems">
                    <div class="card-header">
                        <h5>推荐诗词</h5>
                    </div>
                    <div class="card-body row" >
                        <div class="col col-12 col-md-6 text-truncate w-100" v-for="res in poems">
                            [<a :href="'Dynasty.html?'+res.chaodai" v-text="res.chaodai">宋代</a>]

                            <a :href="'author.html?'+res.zuozhe" v-text="res.zuozhe">苏轼</a>
                            《<a :href="'poem.html?'+res.title" v-text="res.title">苏州姚氏三瑞堂（姚氏世以孝称）</a>》
                        </div>
                    </div>
                </div>

                <!-- 推荐的古诗名句 -->
                <div class="card mt-3 mb-3" id="jus">
                    <div class="card-header">
                        <h5>推荐名句</h5>
                    </div>
                    <div class="card-body">
                        <ul class="list-group">
                            <li class="list-group-item d-flex justify-content-between" v-for="line in lines">
                                <a :href="'lineDetail.html?'+line.gid+'?'+line.title" v-text="line.title">只愿君心似我心，定不负相思意</a>
                                <span class="d-none d-lg-block">
                                    ——<a :href="'poem.html?'+line.biaoti" id="info">
                                        <span class="author"><span>{{line.gid}}</span></span>
                                        《<span v-text="line.biaoti">卜算子·我住长江头</span>》
                                    </a>
                                </span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<footer id="footer"></footer>
</body>
<!--引入jq代码-->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="bootstrap-4.6.1-dist/js/bootstrap.min.js"></script>
<!--引入vue-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!-- 引入axios 实现页面的异步请求-->
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
    $("#header").load("common/navigation.html")
    $("#footer").load("common/footer.html")

    let poem_type = new Vue({
        el:"#poemType"
    })

    /* 查询推荐诗词 */
    let vm_poems = new Vue({
        el:"#poems",
        data:{
            poems:[]
        },
        created:function () {
            axios({
                url:"/poems/findPoems",
                method:"get"
            }).then(function (response) {
                vm_poems.poems = response.data;
                // console.log(response.data)
            })
            console.log("2-------")
        }
    })

    /* 推荐名句 */
    let vm_jus = new Vue({
        el:"#jus",
        data:{
            lines:[]
        },
        created:function () {
            axios({
                url:"/ju/jus",
                method:"get"
            }).then(function (r) {
                vm_jus.lines = r.data;
                //console.log(r.data)
            }).then(() => {
                $(".author").each(function () {
                    //获取诗词的id-0k
                    var str = $(this).text();
                    console.log(str)
                    //调用后台接口，根据诗词表的id查询作者的姓名
                    axios({
                        url:"/ju/"+str,
                        method:"post"
                    }).then(r=> {
                        //获取作者的姓名
                        console.log(r.data)
                        //将诗词表id(str)替换成作者姓名(r.data)
                        var st = str.replace(str,r.data);
                        //console.log("姓名->"+st)
                        //将作者姓名写入html中
                        $(this).html(st)
                    })
                })
            })
        }
    })

</script>
</html>